// 导入自己封装的 axios 库
import { axios } from '../../request/myAxios';
// 导入 runtime 让小程序的支持 async await 语法.
// 变量名固定为 regeneratorRuntime ，且不需要解构
import regeneratorRuntime from '../../libs/runtime/runtime';

// 准备一个变量，用于存放所有的分类数据
// 当点击左侧菜单的时候，再从中取出一部分数据进行页面数据绑定
// 为什么这么做？因为把所有数据都绑定到 data 中，会降低页面性能。
let cateAll;


// 利用小程序本地存储基础优化分类页的请求
// 思路：
//    1. 获取本地存储中是否有缓存
//        1.1 没有 - 发送请求获取分类数据，保存到本地
//        1.2 有   - 读取本地存储的数据
//    2. 本地存储中有数据(1.2展开)
//        2.1  时间过期了 - 发送请求获取分类数据，保存到本地
//        2.2  时间没过期 - 直接渲染到页面

Page({
  /**
   * 页面的初始数据
   */
  // data 的数据不建议放太多，就放一些用于页面渲染的数据就足够了。
  data: {
    finishLoading: false,
    activeIndex: 0,
    cateLeft: [],
    cateRight: [],
    rightScrollTop: 0
  },
  // 左侧点击改变选中状态的索引
  changeTabIndex(e) {
    const { index } = e.currentTarget.dataset;

    this.setData({
      activeIndex: index,
      // 根据左侧的索引值重新绑定右侧的楼层数据
      cateRight: cateAll[index].children,
      // 点击左侧的时候，右侧的楼层都从一楼开始
      rightScrollTop: 0
    });
  },

  onLoad() {
    // 1. 获取本地存储中是否有缓存
    const cates = wx.getStorageSync('cates');

    // 如果没有本地存储
    if (!cates) {
      // 发送请求获取数据
      this.getCateData();
    } else {
      // console.log('有本地存储有数据了', cates);
      // 过期时间为 5 分钟，测试阶段可以先调整成 10s
      if (Date.now() - cates.time > 1000 * 5 * 60) {
        // console.log('时间过了，重新请求');
        // 如果时间超了
        this.getCateData();
      } else {
        // 时间没超，直接使用本地存储
        // console.log('时间没过，使用本地存储');
        // 把本地存储中的数据保存到变量 cateAll 中
        cateAll = cates.data;
        // 映射左侧列表
        const cateLeft = cateAll.map(v => ({ cat_id: v.cat_id, cat_name: v.cat_name }));
        // 默认右侧绑定的数据为数组中第一项的 children
        const cateRight = cateAll[0].children;
        // 更新视图
        this.setData({
          cateLeft,
          cateRight,
          finishLoading: true
        });
      }
    }



  },
  // 为了复用，把获取分类数据的请求封装起来
  async getCateData() {
    // await 写法
    const res = await axios({ url: '/categories' });
    // 映射数据，只保留 name 和 id
    const cateLeft = res.map(v => ({ cat_id: v.cat_id, cat_name: v.cat_name }));
    // 默认右侧绑定的数据为数组中第一项的 children
    const cateRight = res[0].children;
    this.setData({
      cateLeft,
      cateRight,
      // 完成了 loading，把值设置为 true
      finishLoading: true
    });
    // 把 res 复制到变量中保存
    cateAll = res;
    // 获取数据成功后，把数据添加到本地存储中
    // 保存的时候添加一个 time 属性，记录保存时候的时间
    wx.setStorageSync('cates', { time: Date.now(), data: res });


    // axios({ url: '/categories' })
    // .then(res=>{
    //   // 映射数据，只保留 name 和 id
    //   const cateLeft = res.map(v=>({ cat_id:v.cat_id, cat_name:v.cat_name }))
    //   // 默认右侧绑定的数据为数组中第一项的 children
    //   const cateRight = res[0].children
    //   this.setData({
    //     cateLeft,
    //     cateRight
    //   });
    //   // 把 res 复制到变量中保存
    //   cateAll = res;
    //   // 获取数据成功后，把数据添加到本地存储中
    //   // 保存的时候添加一个 time 属性，记录保存时候的时间
    //   wx.setStorageSync('cates', { time: Date.now(), data: res });
    // })
  }

});